import { useState } from 'react';
import styles from './Home.module.scss'
import Header from '../../components/Header/header'
import Menu from '../../components/Menu/menu'
import GoodsCard from '../../components/GoodsCard/goodsCard';
import UserRow from '../../components/UserRow/userRow';
import GoodsRow from '../../components/GoodsRow/goodsRow';
import StatCard from '../../components/StatCard/statCard';
import LineChart from '../../components/LineChart/lineChart';
import SystemMaintenance from '../../components/SystemMaintenance/systemMaintenance';
import Interaction from '../../components/Interaction/interaction';
import { message } from 'antd';
const Home = () => {
    const [currentContent, setCurrentContent] = useState('goods');
    const [searchQuery, setSearchQuery] = useState('');
    const [activeChart, setActiveChart] = useState('users');
    const [goodsList, setGoodsList] = useState([
        {
            id: 'item001',
            data: {
                name: '白色水杯',
                description: '一个普通的白色水杯，容量500ml',
                image: '../public/images/items/白色水杯.jpg',
                location: '图书馆一楼',
                status: '待寻找',
                type: '生活用品',
                date: '2025-01-08',
                publisher: '张三'
            }
        },
        {
            id: 'item002',
            data: {
                name: '白色衣架',
                description: '塑料材质，可折叠',
                image: '../public/images/items/白色衣架.jpg',
                location: '宿舍楼',
                status: '待寻找',
                type: '生活用品',
                date: '2025-01-07',
                publisher: '李四'
            }
        },
        {
            id: 'item003',
            data: {
                name: '笔记本',
                description: '黑色硬皮笔记本，A5大小',
                image: '../public/images/items/笔记本.jpg',
                location: '教学楼',
                status: '待寻找',
                type: '学习用品',
                date: '2025-01-06',
                publisher: '王五'
            }
        },
        {
            id: 'item004',
            data: {
                name: '发夹',
                description: '黑色蝴蝶结发夹',
                image: '../public/images/items/发夹.jpg',
                location: '食堂',
                status: '待寻找',
                type: '饰品',
                date: '2025-01-05',
                publisher: '赵六'
            }
        },
        {
            id: 'item005',
            data: {
                name: '帆布袋',
                description: '米色帆布材质，可装A4纸',
                image: '../public/images/items/帆布袋.jpg',
                location: '图书馆二楼',
                status: '待认领',
                type: '生活用品',
                date: '2025-01-08',
                publisher: '钱七'
            }
        },
        {
            id: 'item006',
            data: {
                name: '高数书',
                description: '高等数学第七版，上册',
                image: '../public/images/items/高数书.jpg',
                location: '教学楼',
                status: '待认领',
                type: '教材',
                date: '2025-01-07',
                publisher: '孙八'
            }
        },
        {
            id: 'item007',
            data: {
                name: '卡包',
                description: '棕色真皮卡包，可放6张卡',
                image: '../public/images/items/卡包.jpg',
                location: '宿舍楼',
                status: '待认领',
                type: '生活用品',
                date: '2025-01-06',
                publisher: '周九'
            }
        },
        {
            id: 'item008',
            data: {
                name: '绿色雨伞',
                description: '折叠伞，绿色',
                image: '../public/images/items/绿色雨伞.jpg',
                location: '教学楼',
                status: '待认领',
                type: '生活用品',
                date: '2025-01-05',
                publisher: '吴十'
            }
        },
        {
            id: 'item009',
            data: {
                name: '铅笔袋',
                description: '黑色帆布材质，可装文具',
                image: '../public/images/items/铅笔袋.jpg',
                location: '图书馆',
                status: '待出售',
                type: '学习用品',
                date: '2025-01-08',
                publisher: '郑十一'
            }
        },
        {
            id: 'item010',
            data: {
                name: '手机支架',
                description: '可调节角度，铝合金材质',
                image: '../public/images/items/手机支架.jpg',
                location: '宿舍楼',
                status: '待出售',
                type: '电子产品',
                date: '2025-01-07',
                publisher: '王十二'
            }
        },
        {
            id: 'item011',
            data: {
                name: '学生证',
                description: '2024级学生证',
                image: '../public/images/items/学生证.jpg',
                location: '食堂',
                status: '待出售',
                type: '证件',
                date: '2025-01-06',
                publisher: '李十三'
            }
        },
        {
            id: 'item012',
            data: {
                name: '眼镜',
                description: '黑色框眼镜，度数300',
                image: '../public/images/items/眼镜.jpg',
                location: '教学楼',
                status: '待出售',
                type: '生活用品',
                date: '2025-01-05',
                publisher: '张十四'
            }
        },
        {
            id: 'item013',
            data: {
                name: '银色耳机',
                description: '无线蓝牙耳机，带充电仓',
                image: '../public/images/items/银色耳机.jpg',
                location: '图书馆',
                status: '寻找中',
                type: '电子产品',
                date: '2025-01-08',
                publisher: '刘十五'
            }
        },
        {
            id: 'item014',
            data: {
                name: 'airpods',
                description: '苹果无线耳机，白色',
                image: '../public/images/items/airpods.jpg',
                location: '宿舍楼',
                status: '寻找中',
                type: '电子产品',
                date: '2025-01-07',
                publisher: '陈十六'
            }
        },
        {
            id: 'item015',
            data: {
                name: 'iphone',
                description: 'iPhone 13，黑色，128G',
                image: '../public/images/items/iphone.jpg',
                location: '教学楼',
                status: '寻找中',
                type: '电子产品',
                date: '2025-01-06',
                publisher: '杨十七'
            }
        },
        {
            id: 'item016',
            data: {
                name: 'OPPO',
                description: 'OPPO Find X5，白色，256G',
                image: '../public/images/items/OPPO.jpg',
                location: '图书馆',
                status: '寻找中',
                type: '电子产品',
                date: '2025-01-05',
                publisher: '黄十八'
            }
        }
    ]);

    const [userList, setUserList] = useState([
        {
            id: 'u1',
            username: '脏脏小包',
            avatar: '../public/images/avatar/userAvatar.jpg',
            gender: '女',
            phone: '18072388335',
            introduction: '没有个人简介~',
            role: '教师/学生',
            loginId: '2021212104',
            password: 'wshkldj891'
        },
        {
            id: 'u2',
            username: '飞飞飞小兔102',
            avatar: '../public/images/avatar/userAvatar01.png',
            gender: '女',
            phone: '13678499002',
            introduction: '没有个人简介~',
            role: '教师/学生',
            loginId: '2021001002',
            password: 'def456'
        },
        {
            id: 'u3',
            username: '小华',
            avatar: '../public/images/avatar/userAvatar02.jpg',
            gender: '男',
            phone: '13800138002',
            introduction: '学习使我快乐',
            role: '教师/学生',
            loginId: '2021001003',
            password: 'ghi789'
        },
        {
            id: 'u4',
            username: '小李',
            avatar: '../public/images/avatar/userAvatar03.jpg',
            gender: '女',
            phone: '13800138003',
            introduction: '喜欢运动',
            role: '教师/学生',
            loginId: '2021001004',
            password: 'jkl012'
        },
        {
            id: 'u5',
            username: '小张',
            avatar: '../public/images/avatar/userAvatar04.png',
            gender: '男',
            phone: '13800138004',
            introduction: '音乐爱好者',
            role: '教师/学生',
            loginId: '2021001005',
            password: 'mno345'
        },
        {
            id: 'u6',
            username: '小王',
            avatar: '../public/images/avatar/userAvatar05.jpg',
            gender: '女',
            phone: '13800138005',
            introduction: '爱看书',
            role: '教师/学生',
            loginId: '2021001006',
            password: 'pqr678'
        },
        {
            id: 'u7',
            username: '小陈',
            avatar: '../public/images/avatar/userAvatar06.jpg',
            gender: '男',
            phone: '13800138006',
            introduction: '篮球达人',
            role: '教师/学生',
            loginId: '2021001007',
            password: 'stu901'
        },
        {
            id: 'u8',
            username: '小周',
            avatar: '../public/images/avatar/userAvatar07.jpg',
            gender: '女',
            phone: '13800138007',
            introduction: '舞蹈爱好者',
            role: '教师/学生',
            loginId: '2021001008',
            password: 'vwx234'
        },
        {
            id: 'u9',
            username: '小吴',
            avatar: '../public/images/avatar/userAvatar08.jpg',
            gender: '男',
            phone: '13800138008',
            introduction: '摄影达人',
            role: '教师/学生',
            loginId: '2021001009',
            password: 'yz0123'
        },
        {
            id: 'u10',
            username: '小李',
            avatar: '../public/images/avatar/userAvatar09.jpg',
            gender: '男',
            phone: '13800138009',
            introduction: '摄影达人',
            role: '教师/学生',
            loginId: '2021001010',
            password: 'yz0123'
        },
        // ... 其他用户数据
    ]);

    // 模拟数据
    const stats = {
        users: 10,
        lostItems: 23,
        foundItems: 27
    };

    // 图表数据
    const chartData = {
        users: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
            data: [5, 7, 9, 8, 10, 6]
        },
        lostItems: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
            data: [15, 18, 20, 23, 21, 19]
        },
        foundItems: {
            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
            data: [20, 22, 25, 27, 24, 23]
        }
    };

    const handleDeleteUser = (loginId) => {
        // 处理删除用户的逻辑
        setUserList(prevList => prevList.filter(user => user.loginId !== loginId));
        message.success('删除成功');
    };

    const handleEditUser = (loginId, editedData) => {
        // 处理编辑用户的逻辑
        setUserList(prevList => prevList.map(user => {
            if (user.loginId === loginId) {
                return {
                    ...user,
                    ...editedData
                };
            }
            return user;
        }));
    };

    const handleDelete = (index) => {
        // index 是从 GoodsRow 传递过来的序号（从1开始），需要减1转换为数组索引
        const arrayIndex = index - 1;
        const newList = [...goodsList];
        newList.splice(arrayIndex, 1);
        setGoodsList(newList);
        message.success('删除成功');
    };

    const handleEditGoods = (index, editedData) => {
        // 处理编辑物品的逻辑
        // index 是从 GoodsRow 传递过来的序号（从1开始），需要减1转换为数组索引
        const arrayIndex = index - 1;
        setGoodsList(prevList => {
            const newList = [...prevList];
            newList[arrayIndex] = {
                ...newList[arrayIndex],
                data: {
                    ...newList[arrayIndex].data,
                    ...editedData
                }
            };
            return newList;
        });
    };

    const handleSearch = (query) => {
        setSearchQuery(query);
    };

    const filteredGoodsList = goodsList.filter(item => {
        const searchLower = searchQuery.toLowerCase();
        return (
            item.data.name.toLowerCase().includes(searchLower) ||
            item.data.type.toLowerCase().includes(searchLower) ||
            item.data.status.toLowerCase().includes(searchLower)
        );
    });

    const handleCardClick = (type) => {
        setActiveChart(type);
    };

    const renderStats = () => (
        <div className={styles.stats}>
            <div className={styles.stats__cards}>
                <StatCard
                    icon={
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                            <circle cx="9" cy="7" r="4"></circle>
                            <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                            <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                        </svg>
                    }
                    count={stats.users}
                    title="用户数量"
                    onClick={() => handleCardClick('users')}
                    isActive={activeChart === 'users'}
                />
                <StatCard
                    icon={
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
                            <path d="M3.29 7L12 12l8.71-5"></path>
                        </svg>
                    }
                    count={stats.lostItems}
                    title="失物数量"
                    onClick={() => handleCardClick('lostItems')}
                    isActive={activeChart === 'lostItems'}
                />
                <StatCard
                    icon={
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                            <circle cx="11" cy="11" r="8"></circle>
                            <path d="m21 21-4.35-4.35"></path>
                        </svg>
                    }
                    count={stats.foundItems}
                    title="寻物数量"
                    onClick={() => handleCardClick('foundItems')}
                    isActive={activeChart === 'foundItems'}
                />
            </div>
            <div className={styles.stats__charts}>
                {activeChart === 'users' && (
                    <LineChart
                        title="今日用户活跃数据"
                        labels={chartData.users.labels}
                        data={chartData.users.data}
                    />
                )}
                {activeChart === 'lostItems' && (
                    <LineChart
                        title="今日失物上线数据"
                        labels={chartData.lostItems.labels}
                        data={chartData.lostItems.data}
                    />
                )}
                {activeChart === 'foundItems' && (
                    <LineChart
                        title="今日寻物上线数据"
                        labels={chartData.foundItems.labels}
                        data={chartData.foundItems.data}
                    />
                )}
            </div>
        </div>
    );

    const renderContent = () => {
        switch (currentContent) {
            case 'home':
                return (
                    <div className={styles.front}>
                        <div className={styles.front__items}>
                            {filteredGoodsList.length > 0 ? (
                                filteredGoodsList.map(item => (
                                    <GoodsCard
                                        key={item.id}
                                        imageUrl={item.data.image}
                                        name={item.data.name}
                                        time={item.data.date}
                                        category={item.data.type}
                                        status={item.data.status}
                                    />
                                ))
                            ) : (
                                <div className={styles.front__emptyResult}>
                                    未找到相关物品
                                </div>
                            )}
                        </div>
                    </div>
                );
            case 'system':
                return <SystemMaintenance />;
            case 'data':
                return (
                    <div className={styles.contentBox}>
                        <h1>数据管理</h1>
                        <p>这是数据管理的内容区域</p>
                    </div>
                );
            case 'user':
                return (
                    <div className={styles.user}>
                        <div className={styles.user__table}>
                            <div className={styles.user__tableHeader}>
                                <div className={styles.user__tableCell}>序号</div>
                                <div className={styles.user__tableCell}>用户名</div>
                                <div className={styles.user__tableCell}>头像</div>
                                <div className={styles.user__tableCell}>性别</div>
                                <div className={styles.user__tableCell}>手机号</div>
                                <div className={styles.user__tableCell}>个人简介</div>
                                <div className={styles.user__tableCell}>用户角色</div>
                                <div className={styles.user__tableCell}>登录账号</div>
                                <div className={styles.user__tableCell}>登录密码</div>
                                <div className={styles.user__tableCell}>操作</div>
                            </div>
                            <div className={styles.user__tableBody}>
                                {userList.map((user, index) => (
                                    <UserRow
                                        key={user.id}
                                        data={user}
                                        onDelete={handleDeleteUser}
                                        onEdit={handleEditUser}
                                        index={index + 1}
                                    />
                                ))}
                            </div>
                        </div>
                    </div>
                );
            case 'goods':
                return (
                    <div className={styles.goods}>
                        <div className={styles.goods__table}>
                            <div className={styles.goods__tableHeader}>
                                <div className={styles.goods__tableCell}>序号</div>
                                <div className={styles.goods__tableCell}>物品名称</div>
                                <div className={styles.goods__tableCell}>物品描述</div>
                                <div className={styles.goods__tableCell}>物品图片</div>
                                <div className={styles.goods__tableCell}>物品地点</div>
                                <div className={styles.goods__tableCell}>物品状态</div>
                                <div className={styles.goods__tableCell}>物品类别</div>
                                <div className={styles.goods__tableCell}>发布时间</div>
                                <div className={styles.goods__tableCell}>发布人</div>
                                <div className={styles.goods__tableCell}>操作</div>
                            </div>
                            <div className={styles.goods__tableBody}>
                                {goodsList.map((item, index) => (
                                    <GoodsRow
                                        key={item.id}
                                        data={{ ...item.data, index: index + 1 }}
                                        onDelete={() => handleDelete(index + 1)}
                                        onEdit={handleEditGoods}
                                    />
                                ))}
                            </div>
                        </div>
                    </div>
                );
            case 'interaction':
                return <Interaction />;
            case 'stats':
                return renderStats();
            default:
                return null;
        }
    };

    return (
        <div className={styles.home}>
            <Header onSearch={handleSearch} />
            <div className={styles.home__main}>
                <Menu currentContent={currentContent} onMenuChange={setCurrentContent} />
                <div className={styles.home__content}>
                    {renderContent()}
                </div>
            </div>
        </div>
    );
};

export default Home;